<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript(1)</title>
<style type="text/css">
#userInput {
	width: 100px;
}

#pswdInput {
	width: 100px;
}

#userSpan {
	margin-left: 10px;
	font-family: "楷体";
	font-size: 12px;
	font-weight: bolder;
}

#pswdSpan {
	margin-left: 10px;
	font-family: "楷体";
	font-size: 12px;
	font-weight: bolder;
}

#submit {
	color: #fff;
	background-color: blue;
}

.ok {
	color: green;
}

.error {
	color: red;
}

#dd1>div{
        width: 30px;
        height: 30px;
        background-color: red;
        display: inline-block;
        margin: 5px;
    }
</style>
<script type="text/javascript">
	//js注释可以这样写
	/*也可以这样写*/
	/* 把js代码写到script标签内部,script标签可以放到html的任何位置,但通常放到head标签中 */
	/* function是关键字,用来声明函数 */
	/* fn1是函数名,小括号内可以声明参数 */
	/* js中函数都是公有的,不需要修饰符 */
	/* 函数不需要声明返回值类型 */
	/* 函数体中没写retrun,函数调用时默认返回值为undefined */

	function fun() {
		var str = "你好!\n'欢迎来到javascript世界'!"
		alert(str);

		var s = "hello";
		var n = 9;
		var b = true;

		console.log(s + n);//hello9
		console.log(s + b);//hellotrue
		console.log(n + b);//true--1  false--0
		console.log(b + b);//2

		var n = 3.14;
		var s = 3.14;
		console.log(n.toString() + 1);
		console.log(parseInt(s) + 1);
		console.log(parseFloat(s) + 1);
		console.log(parseFloat("") + 1);/*NaN 不是一个数*/

		var s1 = "123";
		var s2 = 123;
		var s3 = 123;

		console.log(s1 == s2);
		console.log(s1 == s3);
		console.log(s1 === s2);/*===全等：数据类型和值都相等*/
		console.log(s2 === s3);

		var k = 8;
		if (k) {
			console.log("ok!");
		}
		var str2 = "0";
		str2 && console.log("ok2!");
	}

	function fun1() {
		alert("嵌入式");

		return 123;
	}

	function fun3() {
		var num = 100;
		console.log(typeof (num) == "string");
		console.log(typeof (undefined));/*undefined值和类型都是它*/
		console.log(typeof (null) == "object");/*null数据类型为object*/
	}
	function fun4() {
		console.log(isNaN(56));
		console.log(isNaN("32"));/*居然是个数 不是字符串*/
		console.log(isNaN("ABC"));
		console.log(isNaN(""));/* false JS的bug*/
		console.log(parseInt("")); /* NaN */

		var s1 = "123";
		var s2 = 123;
		var s3 = 123;

		console.log(s1 == s2);//t
		console.log(s1 == s3);//t
		//全等:
		//类型相同
		//数据值相同
		console.log(s1 === s2);
		console.log(s2 === s3);

		var k = 8;
		k && console.log("ok");
	}

	function fun5() {
		var input1 = document.getElementById("num1").value;
		var result1;
		if (!isNaN(input1) && input1 != "") {
			result1 = input1 * input1;
		} else {
			result1 = "您输入的不是数字！"
		}
		document.getElementById("span1").innerHTML = result1;
	}

	var anser = parseInt(Math.random() * 100);
	function fun6() {
		var input2 = document.getElementById("num2").value;
		var result2;
		if (isNaN(input2) || input2 == "") {
			result2 = "您输入的不是数字！";

		} else if (input2<0|| input2>100) {
			result2 = "您输入的数字超出范围！"
		} else {
			result2 = (input2 == anser ? "恭喜你猜对啦！" : (input2 > anser ? "猜大了！"
					: "猜小了!"));
		}
		document.getElementById("span2").innerHTML = result2;
	}

	function fun7() {
		var input3 = document.getElementById("num3").value;
		var result3;
		if (!isNaN(input3) && input3 != "" && input3 >= 0 && input3 <= 100) {
			if (input3 % 1 != 0) {
				result3 = "小数没有阶乘值！";
			} else if (input3 == 0) {
				result3 = 1;
			} else {
				var numx = 1;
				for (var i = input3; i; i--) {/*0为false*/
					numx *= i;
				}
				result3 = numx;
			}
		} else if (input3 > 100) {
			result3 = "您输入的数字超出范围！"
		} else if (input3 < 0) {
			result3 = "负数没有阶乘值！"
		} else {
			result3 = "您输入的不是数字！";
		}
		document.getElementById("span3").innerHTML = result3;
	}

	function fun8() {
		var contents = [ "天气预报", "奇人异事", "法制社会", "寻人启事", "明星趣事" ];
		var oUL = document.getElementById("ul");
		str = "<li><span><a>[content]</a></span></li>";
		for (var i = 0; i < contents.length; i++) {
			oUL.innerHTML += str.replace("[content]", contents[i]);
		}
	}
	function fun9() {
		var arr1 = [ 12.3, "45", null, true, "a", 37 ];
		arr1.pop();//尾端出栈
		arr1.push("xyz");//尾端入栈
		var arr2 = new Array();
		arr2[0] = "hello!";
		arr2[1] = 666;
		arr2[2] = NaN;
		arr2[3] = "";
		arr2[4] = null;

		var arr = [ 11, 2.3, 5, 9, 17, 3.6, -24, -12, 0.5 ];
		var strs = [ "a", "ab", "abc", "bc", "b", "bac", "c", "cab", "cc" ];

		console.log(arr1);
		console.log(arr2.reverse());
		console.log(arr.sort(function(x, y) {
			return y - x
		}));/*控制降序排列*/
		console.log(strs.sort());/*unicode编码排序*/
	}

	function fun10() {
		var str = "you can you up,no can no bi bi! + \s\d";
		var str1 = " 1";
		var reg = /can/g;/*g为全局模式*/
		var reg2 = new RegExp("\\s\\d");
		var reg3 = /NO/i;/*i为忽略大小写*/

		console.log(reg2);
		console.log(reg2.test(str1));
		console.log(reg2.test(str));

		console.log(reg.exec(str));
		console.log(reg.exec(str));
		console.log(reg.exec(str));//null
		console.log(reg.exec(str));//重头来
		console.log(reg.exec(str));

		console.log(str.replace(reg, "v"));
		console.log(str.replace(/bi/g, "*"));
		console.log(str.replace(reg3, "not"));
		console.log(str.match(/you/g));
		console.log(str.search(/you/g));/*即使全局模式，找到第一个返回下标后就不找了*/

	}

	function checkUser() {
		var userInput = document.getElementById("userInput").value;
		var reg = /^\w{5,10}$/;
		if (reg.test(userInput)) {
			userSpan.className = "ok";
			return true;
		} else {
			userSpan.className = "error";
			return false;
		}

	}
	function checkPswd() {
		var pswdInput = document.getElementById("pswdInput").value;
		var reg = /^\w{5,10}$/;
		if (reg.test(pswdInput)) {
			pswdSpan.className = "ok";
			return true;
		} else {
			pswdSpan.className = "error";
			return false;
		}
	}

	function fun11() {
		var input = document.getElementById("input").value;
		var result;
		try {
			result = eval("(" + input + ")");/*多加一个（）可防止bug*/
		} catch (e) {
			result = "Error!";
		}
		document.getElementById("input").value = result;
	}
	
	function fun12(){
        var i1 = document.getElementById("i1");
        var i2 = document.getElementById("i2");
        var d = document.getElementById("dd1");
        //遍历行数
        for(var j=0;j<i1.value;j++){
            //遍历一行的个数
            for(var i=0;i<i2.value;i++){
                d.innerHTML+="<div>a</div>";
            }
            //添加换行
            d.innerHTML+="<br>";
        }
        
    }
</script>
<script type="text/javascript" src="myfirst.js"></script>
</head>
<body>
	<h1>一、JavaScript 三种基础写法</h1>
	<!-- 事件:用户在做出某种操作时,会调用js代码  -->
	<h3>1.事件定义式</h3>
	<input type="button" value="事件定义式" onclick="alert('事件定义式')">
	<h3>2.嵌入式</h3>
	<input type="button" value="嵌入式" onclick="fun1();">
	<h3>3.文件调用式</h3>
	<input type="button" value="文件调用式" onclick="fun2();">

	<h1>二、基本数据类型（Number String Boolean Array Fuction）及其API</h1>
	<h2>1.基础演示：请注意浏览器按F12看Console后台</h2>
	<input type="button" value="检测基础知识" onclick="fun();">
	<input type="button" value="检测typeof" onclick="fun3();">
	<input type="button" value="检测isNaN" onclick="fun4();">
	<input type="button" value="数组的演示" onclick="fun9();">
	<input type="button" value="正则表达式演示" onclick="fun10();">
	<h2>2.小案例</h2>
	<div>
		<h3>(1)计算平方数</h3>
		<input type="text" placeholder="请输入一个数字" id="num1"><input
			type="button" value="平方" onclick="fun5();"> = <span
			id="span1">计算的结果</span>
	</div>

	<div>
		<h3>(2)网页版猜数字</h3>
		<input type="text" placeholder="请输入1-100的整数" id="num2"><input
			type="button" value="验证" onclick="fun6();"> <span id="span2"></span>
	</div>

	<h3>(3)算n!</h3>
	<input type="text" placeholder="请输入1-100的整数" id="num3">
	<input type="button" value="!" onclick="fun7();"> =
	<span id="span3">计算的结果</span>
	</div>
	<h3>(4)模拟从服务器获得频道数据</h3>
	<input type="button" value="获取数据" onclick="fun8();">
	<ul id="ul">
	</ul>
	<h3>(5)简易form表单登录验证</h3>
	<form action="http://www.tmooc.cn" method="get"
		onsubmit="return checkUser()*checkPswd()==1">
		<!--短路的解决：+或*-->
		<div>
			<label>账号：</label><input type="text" name="username"
				onblur="checkUser();" placeholder="请输入用户名" id="userInput"><span
				id="userSpan">5-10位字母数字下划线</span>
		</div>
		<div>
			<label>密码：</label><input type="password" name="password"
				onblur="checkPswd();" placeholder="请输入密码" id="pswdInput"><span
				id="pswdSpan">5-10位字母数字下划线</span>
		</div>
		<input type="submit" value="登录" id="submit">
	</form>
	<h3>(6)简易的计算框</h3>
	<input type="text" id="input">
	<input type="button" onclick="fun11();" value="计算">

	<h3>(6)控制生成表格</h3>
	<input type="text" id="i1" placeholder="行数">
	<input type="text" id="i2" placeholder="列数">
	<input type="button" value="添加" onclick="fun12()">
	<div id="dd1"></div>
</body>
</html>